<template>
	<view class="share">
		<view>
			<view :class="{ 'share-box': shareState }" @click="handleHiddenShare"></view>
			<view class="share-item" :class="{ 'share-show': shareState }">
				<view class="share-to">
					<span class="choice-result">{{space1[active1Class]}}室 {{space2[active2Class]}}厅 {{space3[active3Class]}}厨 {{space4[active4Class]}}卫</span>
					<span class="cancel-btn" @click.stop="handleHiddenShare">取消</span>
					<span class="ok-btn" @click.stop="ensureChoice">确定</span>
				</view>
				<section>
					<section class="menu-item-list">
						<div class="menu-item" :class="active1Class == index ? 'selected' : ''" v-for="(item, index) in space1" :key="index" @click="choiceSpace1(index)">
							{{ item }}室
						</div>
					</section>
					<section class="menu-item-list">
						<div class="menu-item" :class="active2Class == index ? 'selected' : ''" v-for="(item, index) in space2" :key="index" @click="choiceSpace2(index)">
							{{ item }}厅
						</div>
					</section>
					<section class="menu-item-list">
						<div class="menu-item" :class="active3Class == index ? 'selected' : ''" v-for="(item, index) in space3" :key="index" @click="choiceSpace3(index)">
							{{ item }}厨
						</div>
					</section>
					<section class="menu-item-list">
						<div class="menu-item" :class="active4Class == index ? 'selected' : ''" v-for="(item, index) in space4" :key="index" @click="choiceSpace4(index)">
							{{ item }}卫
						</div>
					</section>
				</section>
			</view>
		</view>
		<view class="overgray" :class="{ 'over-show': shareState }" @click.stop="handleHiddenShare"></view>
	</view>
</template>

<script>
export default {
	props: {},
	data() {
		return {
			shareState: false,
			space1:["0","1","2","3","4","5"],
			space2:["0","1","2","3","4","5"],
			space3:["0","1","2","3","4","5"],
			space4:["0","1","2","3","4","5"],
			showchoice:"",
			active1Class:3,
			active2Class:1,
			active3Class:1,
			active4Class:1
		};
	},
	
	methods: {
		ensureChoice(){
			this.$emit("getChild1",[this.active1Class,this.active2Class,this.active3Class,this.active4Class]);
			this.shareState = false;
		},
		choiceSpace1(index){
			this.active1Class = index;
		},
		choiceSpace2(index){
			this.active2Class = index;
		},
		choiceSpace3(index){
			this.active3Class = index;
		},
		choiceSpace4(index){
			this.active4Class = index;
		},
		// 显示分享
		handleShowShare() {
			this.shareState = true;
		},
		// 隐藏分享
		handleHiddenShare() {
			this.shareState = false;
		}
	}
};
</script>

<style lang="less">
.cancel-btn {
	position: absolute;
	height: 50px;
	width: 58px;
	right: 58px;
	text-align: center;
	color: #9b9b9b;
}
.ok-btn {
	position: absolute;
	height: 50px;
	width: 58px;
	right: 0;
	text-align: center;
	color: #36be66;
}
.overgray {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 10;
	display: none;
}
.over-show {
	display: block;
}
section {
	display: block;
}
.menu-item-list {
	display: inline-block;
	width: 24%;
	.menu-item {
		height: 50px;
		line-height: 50px;
		text-align: center;
		&.selected {
			color: #fff;
			background: #36be66;
		}
	}
}
.share {
	width: 100%;
	height: 300px;
}
.share-box {
	width: 100%;
	height: 300px;
	position: fixed;
	bottom: 0rpx;
	right: 0rpx;
	background-color: rgba(0, 0, 0, 0.4);
	transition: 0.3s;
	z-index: 999;
}
// 进入分享动画
.share-show {
	transition: all 0.3s ease;
	transform: translateY(0%) !important;
}
// 离开分享动画
.share-item {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	transition: all 0.3s ease;
	transform: translateY(100%);
	z-index: 1999;
	.share-to {
		height: 50px;
		border-bottom: solid 1px #f4f4f4;
		line-height: 50px;
		.choice-result {
			margin-left: 15px;
			color: #9b9b9b;
			font-size: 16px;
		}
		&::after {
			content: '';
			width: 240rpx;
			height: 0rpx;
			border-top: 1px solid #e4e7ed;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			margin-left: 30rpx;
		}
		&::before {
			content: '';
			width: 240rpx;
			height: 0rpx;
			border-top: 1px solid #e4e7ed;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			margin-right: 30rpx;
		}
	}
	.content {
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		.block {
			width: 33%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 180rpx;
			image {
				width: 80rpx;
				height: 80rpx;
			}
			text {
				margin-top: 16rpx;
				font-size: 28rpx;
				color: #606266;
			}
		}
	}
	.cancel {
		width: 100%;
		height: 3rem;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1rpx solid #e4e7ed;
	}
}
</style>
